<template>
  <div class="pile-management">
    <el-card class="header">
      <h2>充电桩管理</h2>
      <br/>
      <!-- 筛选区域 -->
      <el-row :gutter="20">
        <el-col :span="6">
          <el-input v-model="pileName" placeholder="充电桩名称"/>
        </el-col>
        <el-col :span="6">
          <el-input v-model="pileCode" placeholder="充电桩编号"/>
        </el-col>
        <el-col :span="5">
          <el-select v-model="pileStatus" placeholder="状态">
            <el-option label="全部" :value="null"/>
            <el-option label="空闲中" :value="'空闲中'"/>
            <el-option label="使用中" :value="'使用中'"/>
            <el-option label="故障中" :value="'故障中'"/>
          </el-select>
        </el-col>
        <el-col :span="7">
          <el-button type="primary" @click="fetchData">查询</el-button>
          <el-button @click="resetFilters">重置</el-button>
          <el-button type="primary" @click="openAddDialog">新增</el-button>
          <el-button type="danger" @click="onBatchDelete">批量删除</el-button>
        </el-col>
      </el-row>
    </el-card>

    <!-- 列表 -->
    <pile-table
        :piles="piles"
        :page="page"
        :size="size"
        :total="total"
        @fetch="fetchData"
        @view="viewPile"
        @edit="editPile"
        @delete="(row) => deletePile(row, fetchData)"
        @selection-change="handleSelectionChange"
        @update:page="updatePage"
        @update:size="updateSize"
        @toggle="togglePileStatus"
    />
    <!-- 新增站点弹窗 -->
    <el-dialog v-model="addDialogVisible" title="新增充电桩" width="85%">
      <pile-add-form
          v-if="addDialogVisible"
          @refresh="fetchData"
          @close="addDialogVisible = false"
      />
    </el-dialog>

    <!-- 编辑站点弹窗 -->
    <el-dialog v-model="editDialogVisible" title="编辑充电桩" width="85%">
      <edit-pile-form
          v-if="editDialogVisible"
          :edit-data="editForm"
          @refresh="fetchData"
          @close="editDialogVisible = false"
      />
    </el-dialog>

    <!-- 查看弹窗 -->
    <el-dialog v-model="viewDialogVisible" title="查看充电桩信息" width="85%">
      <pile-detail
          v-if="viewDialogVisible"
          :view-data="viewForm"
      />
    </el-dialog>
  </div>
</template>

<script>


import {usePileData} from '../../composables/usePileData.js';   // 列表/删除/上下线
import {usePileForm} from '../../composables/usePileForm.js';   // 新增表单
import {useEditPile} from '../../composables/useEditPile.js';   // 编辑/查看表单
import PileTable from "../../components/PileTable.vue";
import PileAddForm from "../../components/PileAddForm.vue";
import PileDetail from "../../components/PileDetail.vue";
import EditPileForm from '../../components/EditPileForm.vue';
import {ElMessage, ElMessageBox} from "element-plus";
import axios from "axios";

export default {
  name: 'StationManagement',
  components: {
    PileTable,
    PileAddForm,
    PileDetail,
    EditPileForm,
  },
  setup() {
    // 1) 列表数据及操作
    const {
      piles,
      selectedPiles,
      page,
      size,
      total,
      loading,
      pileName,
      pileCode,
      pileStatus,
      fetchData,
      handleSelectionChange,
      deletePile,
      batchDelete,
    } = usePileData();

    // 2) 新增表单弹窗

    const {addDialogVisible, openAddDialog} = usePileForm();

    // 3) 编辑表单弹窗 & 查看表单弹窗
    const {
      editDialogVisible,
      viewDialogVisible,
      editForm,
      viewForm,
      editPile,
      viewPile,
    } = useEditPile();

    // 重置筛选条件
    const resetFilters = () => {
      page.value = 1;
      size.value = 10;
      pileName.value = '';
      pileCode.value = '';
      pileStatus.value = null; // 重置 pileStatus
      fetchData();
      ElMessage.success('筛选条件已重置'); // 可选：显示提示信息
    };

    const onBatchDelete = () => {
      ElMessageBox.confirm(
          '确认要删除选中的项吗？',
          '警告',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
      ).then(() => {
        // 用户点击确认后执行删除操作
        batchDelete(fetchData);
      }).catch(() => {
        // 用户点击取消后可以在这里处理
        ElMessage.info('删除操作已取消');
        console.log('删除操作已取消');
      });
    };


    // 分页相关
    const updatePage = (newPage) => {
      page.value = newPage;
      fetchData();
    };
    const updateSize = (newSize) => {
      size.value = newSize;
      page.value = 1;
      fetchData();
    };

    //状态按钮相关

    // 状态切换方法
    const togglePileStatus = async (row) => {
      if (row.pileStatus === '故障中') {
        ElMessage.warning('故障中的充电桩无法进行操作');
        return;
      }

      // 确定切换目标状态和对应的 API
      let apiUrl = '';
      let successMessage = '';
      if (row.pileStatus === '使用中') {
        apiUrl = `chargingPile/offlineChargingPile/${row.id}`;
        successMessage = '下线成功';
      } else if (row.pileStatus === '空闲中') {
        apiUrl = `chargingPile/onlineChargingPile/${row.id}`;
        successMessage = '上线成功';
      } else {
        // 其他状态不处理
        ElMessage.warning('无法切换该状态');
        return;
      }

      try {
        const response = await axios.put(apiUrl);
        ElMessage.success(response.data);
        fetchData(); // 刷新数据
      } catch (error) {
        ElMessage.error('更新状态失败');
        console.error(error);
      }
    };


    // 初始化
    fetchData();

    return {
      // 列表
      piles,
      selectedPiles,
      page,
      size,
      total,
      loading,
      pileName,
      pileCode,
      pileStatus,

      // 方法
      fetchData,
      resetFilters,
      handleSelectionChange,
      deletePile,
      onBatchDelete,
      updatePage,
      updateSize,
      togglePileStatus,


      // 新增弹窗
      addDialogVisible,
      openAddDialog,

      // 编辑 & 查看
      editDialogVisible,
      viewDialogVisible,
      editForm,
      viewForm,
      editPile,
      viewPile,
    };
  },
};
</script>

<style scoped>
.site-management {
  padding: 20px;
  margin: 0;
  height: 100vh;
  background: linear-gradient(to right, rgba(255, 165, 0, 0.5), rgba(255, 215, 0, 0.5));
}

.header h2 {
  margin: 0;
  font-size: 24px;
  font-weight: bold;
}
</style>
